@import "@/styles/variables.scss";

.project-detail-overview{
  margin-bottom: $collection-y;


  .top{
    display: flex;
  }

  .middle{
    margin: $collection-y 0;
  }


  .box-card{
    //border: 1px #e6e6e6 solid;
    background-color: white;
    width: max-content;
    height: auto;

    .card-content{
      padding: 20px;
      padding-top: 0;
    }
  }

  .chart-title{
    height: 40px;
    font-weight: bold;
    //background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span{
      padding-left: 20px;
    }

    .special{
      color: $font-color-info;
    }
  }

  .consumingView{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 320px;

    .progress-view{
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .el-progress{
        width: 100%;
      }
      .progress-text{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: $font-color-info;
        align-items: flex-end;

        .progress-text-center{
          span:first-child{
            color: $font-color-main;
            font-weight: bold;
          }
          font-size: 20px;

        }
      }
    }

    .consumingView-bottom{
      display: flex;
      align-items: flex-end;
      color: $font-color-info;
      font-size: 14px;
      span{
        margin-right: 40px;
      }
    }
  }

  .progress-view{
    .el-progress{
      .el-progress-bar{
        .el-progress-bar__outer{
          background-color:#c7e7fd !important;
        }
      }
    }
  }

  .block-view{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    width: 300px;
    .block{
      width: 50%;
      display: flex;
      font-size: $font-size-main;
      align-items: center;

      .block-title{
        width: 80px;
        padding-left: 0;
        margin: 0;
        font-weight: initial;
      }

      .clear-block{
        width: 19px;
        height: 12px;
        border: 0.5px #e6e6e6 solid;
        margin-right: 5px;
      }

      .green-block{
        width: 20px;
        height: 13px;
        background-color: #4ec99c;
        margin-right: 5px;
      }

      .blue-block{
        width: 20px;
        height: 13px;
        background-color: #45aef8;
        margin-right: 5px;
      }

      .light-blue-block{
        width: 20px;
        height: 13px;
        background-color: #286ee6;
        margin-right: 5px;
      }

      .red-block{
        width: 20px;
        height: 13px;
        background-color: #f2627d;
        margin-right: 5px;
      }

      .yellow-block{
        width: 20px;
        height: 13px;
        background-color: #f9d351;
        margin-right: 5px;
      }
    }
  }


}
